<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>测试</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="author" content="FH Admin QQ313596790" />

    <!-- vue -->
    <script src="../assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="../assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="../assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="../assets/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="../utils/myAjax.js"></script>

</head>

<body>
    <div id="app">
        <!-- [加载状态 ] start -->
        <div class="loader-bg">
            <div class="loader-track">
                <div class="loader-fill"></div>
            </div>
        </div>
        <!-- [ 加载状态  ] End -->

        <!-- [ 主内容区 ] start -->
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ Main Content ] start -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>欢迎使用 FH Admin 系统	</h4>
                                            <h6>QQ：313596790  &nbsp; 官网： <a href="http://www.fhadmin.org">www.fhadmin.org</a></h6>
                                        </div>
                                    </div>
                                    <div>
                                        <el-row :gutter="20">
                                            <el-col :span="14">
                                                <div style="width: 100%; display: inline-block; ">
                                                    <el-statistic :value="deadline2" time-indices title="商品降价">
                                                        <template slot="suffix"> 抢购即将开始 </template>
                                                    </el-statistic>
                                                </div>
                                                <div style="width: 100%; display: inline-block; margin-top: 50px; ">
                                                    <el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
                                                        <template slot="suffix">
                                                            <el-button type="primary " size="small" @click="add">add 10 second</el-button>
                                                        </template>
                                                    </el-statistic>
                                                </div>
                                            </el-col>
                                            <el-col :span="10">
                                                <el-card shadow="hover" style="width: 100%;">
                                                    <div slot="header" class="clearfix">
                                                        <span>文嘉《明日歌》</span>
                                                        <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
                                                    </div>
                                                    <div style="font-size: 18px;text-align: center; ">明日复明日</div>
                                                    <div style="font-size: 18px;text-align: center;">明日何其多</div>
                                                    <div style="font-size: 18px;text-align: center;">我生待明日</div>
                                                    <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
                                                    <div style="margin-top: 40px;"></div>
                                                    <el-statistic
                                                            ref="statistic"
                                                            @finish="hilarity"
                                                            format="HH:mm:ss"
                                                            :value="deadline4"
                                                            title="距离明日："
                                                            time-indices
                                                    >
                                                    </el-statistic>
                                                </el-card>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <el-row :gutter="10" >
                                        <el-col >
                                            <el-button
                                                type="primary"
                                                @click="openAdd()"
                                            >新增出差申请
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                    <template style="margin-top: 30px">
                                        <el-table
                                                :data="tableData"
                                                style="width: 100%">
                                            <el-table-column prop="id" v-if="false"></el-table-column>
                                            <el-table-column
                                                    prop="name"
                                                    label="出差人"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="position"
                                                    label="出差地点"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="days"
                                                    label="总天数"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="startDate"
                                                    label="开始日期">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="endDate"
                                                    label="结束日期">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="status"
                                                    label="申请状态">
                                            </el-table-column>
                                            <el-table-column label="操作" >
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        @click="audit(scope.row)"
                                                        v-if="scope.row.status == '0'"
                                                    >审批
                                                    </el-button>
                                                    <el-button
                                                            type="text"
                                                            @click="handleAssistant(scope.row)"
                                                            v-if="scope.row.status == '1'"
                                                    >生成助勤单
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                </div>
                            </div>
                            <!-- [ Main Content ] end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ 主内容区 ] end -->

        <el-dialog
                title="新增出差"
                :visible.sync="open"
                 width="80%">
            <el-form :model="form" ref="form">
                <el-form-item label="申请人" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请人部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dpm" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出差地点" :label-width="formLabelWidth">
                    <el-input v-model="form.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="起止时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.startDate"
                            type="date"
                            value-format="yyyy-MM-dd">
                            placeholder="开始日期">
                    </el-date-picker>
                    <el-date-picker
                            v-model="form.endDate"
                            type="date"
                            value-format="yyyy-MM-dd">
                            placeholder="截止日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="总天数" :label-width="formLabelWidth">
                    <el-input v-model="form.days" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出差事由" :label-width="formLabelWidth">
                    <el-input v-model="form.reason" tyep="textarea" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog
                title="生成助勤单"
                :visible.sync="openAssist"
                width="80%">
            <el-form :model="assistForm" >
                <el-form-item label="助勤部门" :label-width="formLabelWidth">
                    <el-input v-model="assistForm.newDpm" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="起止时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="assistForm.startDate"
                            type="date"
                            value-format="yyyy-MM-dd">
                            placeholder="开始日期">
                    </el-date-picker>
                    <el-date-picker
                            v-model="assistForm.endDate"
                            type="date"
                            value-format="yyyy-MM-dd">
                        placeholder="截止日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="总天数" :label-width="formLabelWidth">
                    <el-input v-model="assistForm.days" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出差事由" :label-width="formLabelWidth">
                    <el-input v-model="assistForm.reason" tyep="textarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-table :data="assistForm.peopleList" >
                    <el-table-column label="姓名" prop="name">
                        <template slot-scope="scope">
                            <el-form-item :label-width="'0px'" :prop="'peopleList.'+scope.$index +'.name'">
                                <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="原部门" prop="oldDpm">
                        <template slot-scope="scope">
                            <el-form-item :label-width="'0px'" :prop="'peopleList.'+scope.$index+'.oldDpm'">
                                <el-input v-model="scope.row.oldDpm" autocomplete="off"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openAssist = false">取 消</el-button>
                <el-button type="primary" @click="addPeople()">添 加</el-button>
                <el-button type="primary" @click="addAssist()">确 定</el-button>
            </div>
        </el-dialog>


        <el-divider></el-divider>

        <div id="box" style="height: 300px">

        </div>

        <el-divider>这里是底部</el-divider>

    </div>
<!--echarts-->
<script type="text/javascript" src="../assets/echarts.all.js" ></script>

<script type="text/javascript" src="../utils/myAjax.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                deadline2: Date.now() + 1000 * 60 * 60 * 8,
                deadline3: Date.now() + 1000 * 60 * 30,
                deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
                stop: true,
                tableData: [],
                form:{},
                assistForm:{
                   peopleList:[],
                },
                open:false,
                formLabelWidth: '120px',
                openAssist:false,
                chartSet:[],
                xData:[],
                yData:[],
            };
        },
        methods: {
        list(){
            /*$.ajax({
                xhrFields:{
                    withCredentials:true,
                },
                url:'/business/list',
                type: "POST",
                data:{},
                dataType:"json",
                success:(data)=>{
                    this.tableData = data.list;
                },
            })*/
            sendAjax("/business/list","POST",{}).then(res=>{
                /*console.log(res)*/
                this.tableData = res.list;
            })
        },
        openAdd(){
            this.form = {};
            /*this.$refs["form"].resetFields();*/
            this.open=true;
        },
        handleSubmit(){
            this.form.status = '0';
            this.addForm(this.form);
        },
        addForm(data){
            /*$.ajax({
                xhrFields: {
                    withCredentials: true,
                },
                type:"POST",
                url:'/business/add',
                data:data,
                dataType:"json",
                success:(data)=>{
                    if(data.result == 'yes'){
                        this.$message.success("新增成功");
                        this.list();
                        this.open = false;
                    }

                },
                complete:()=>{

                }
            })*/
            console.log(data)
            sendAjax(
                "/business/add","POST",data
            ).then(res=>{
                if(res.result == 'yes'){
                    this.$message.success("新增成功");
                    this.list();
                    this.open = false;
                }
            })
        },
        audit(row){
            var newObj = {...row};
            newObj.status = '1';
            newObj.auditor = 'admin';
            console.log(newObj)
            $.ajax({
                xhrFields:{
                    withCredentials:true,
                },
                url:'/' + "business/audit",
                data:newObj,
                dataType:"json",
                type:"POST",
                success:(data)=>{
                    this.$message.success("审核通过");
                    this.list();
                }
            })

        },
        handleAssistant(row){
            this.assistForm.linkId = row.id;
            this.assistForm.days = row.days;
            this.assistForm.startDate = row.startDate;
            this.assistForm.endDate = row.endDate;
            this.assistForm.peopleList.push({

            });
            this.openAssist = true;
        },
        addPeople(){
            this.assistForm.peopleList.push({

            })
        },
        addAssist(){
            let successNum = 0;
            this.assistForm.peopleList.forEach(item=>{
                const obj = {...this.assistForm, ...item};
                $.ajax({
                    xhrFields:{
                        withCredentials:true,
                    },
                    type:"POST",
                    url:"/" + "business/addAssist",
                    data:obj,
                    dataType:"json",
                    async:false,
                    success:(data)=>{
                        if(data.result == 'yes'){
                            successNum ++;
                        }

                    }
                })

            })
            this.$message.info("成功新增" + successNum + "条");
            if(successNum > 0){
                this.openAssist = false;
            }
        },
         getChartSet(){
             $.ajax({
                 xhrFields:{
                     withCredentials:true,
                 },
                 url:"/" + "business/getChart",
                 type: "GET",
                 data:{},
                 dataType:"json",
                 success:(data)=>{
                     if(data.list && data.list.length > 0){
                         data.list.forEach((item)=>{
                             this.xData.push(item.month);
                             this.yData.push(item.people);
                         })
                     }
                     this.initChart();
                 },
             })
         } ,
         initChart(){
             var myChart = echarts.init(document.getElementById('box'));

             var options = {
                 title: {
                     text: '测试图标',
                     x:'center',
                     y:'top',
                 },
                 xAxis:{
                     name:'月份',
                     type: 'category',
                     data: vm.$data.xData,
                 },
                 yAxis: {
                     name:'出差人数',
                     type: 'value'
                 },
                 series:{
                     data:vm.$data.yData,
                     type:'bar'
                 }
             }
             console.log('=====绘图===');
             console.log(myChart)
             console.log(options)

             myChart.setOption(options);
         },
        hilarity() {
            this.$notify({
                title: '提示',
                message: '时间已到，你可知寸金难买寸光阴？',
                duration: 0,
            });
        },
        clickFn() {
            this.$refs.statistic.suspend(this.stop);
            this.stop = !this.stop;
        },
        add() {
            this.deadline3 = this.deadline3 + 1000 * 10;
         },
        },
        mounted:function () {
            this.list();
            this.getChartSet();
        }
    })



</script>



</body>
</html>